<template>
  <el-container class="main-container">
    <el-aside class="login-container">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
    >
      <h3 class="title">xx 展示平台</h3>
      <el-form-item prop="username">
        <el-input
            v-model="loginForm.username"
            type="text"
            placeholder="账号"
            prefix-icon="el-icon-user-solid"
            @keyup.enter.native="handleLogin"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
            v-model="loginForm.password"
            type="password"
            prefix-icon="el-icon-s-help"
            placeholder="密码"
            @keyup.enter.native="handleLogin"
        >
        </el-input>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" name="remember-me" style="margin-bottom: 25px">记住密码
      </el-checkbox>
      <el-form-item style="width: 100%">
        <el-button
            :loading="loading"
            size="medium"
            style="width: 100%;background-color: #5839ac;color: #ffffff"
            @click.native.prevent="handleLogin"
            v-loading.fullscreen.lock="loading"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>
      <el-form-item label="还没有账号?" style="margin-top: -10px">
        <el-tag effect="dark" type="success">
          <el-link href="/register">去注册</el-link>
        </el-tag>
      </el-form-item>
      <el-form-item label="超级管理员:" >
        <el-tag effect="dark" type="success">nanjustar</el-tag>
        <el-tag effect="dark" style="margin-left: 20px">123456</el-tag>
      </el-form-item>
      <el-form-item label="普通管理员:" style="margin-top: -10px">
        <el-tag effect="dark" type="success"> admin</el-tag>
        <el-tag effect="dark" style="margin-left: 20px">123456</el-tag>
      </el-form-item>

    </el-form>
    </el-aside>
    <el-main class="spaceMan-parent">
      <!--动画-->
      <lottie-player
          src="https://assets6.lottiefiles.com/packages/lf20_Ns4TLz.json"
          background="transparent"
          speed="1"
          class="spaceMan"
          loop
          autoplay
      >
      </lottie-player>
      <lottie-player
          src="https://assets4.lottiefiles.com/packages/lf20_zprb9vzj.json"
          background="transparent"
          speed="1"
          class="bg"
          loop
          autoplay>
      </lottie-player>
    </el-main>
  </el-container>

</template>

<script>
import {messageInfo} from "@/utils/MessageInfo";
import {Login} from "../api/login/loginApi";

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "nanjustar",
        password: "123456",
        rememberMe: false,
      },
      loginRules: {
        username: [
          {required: true, trigger: "blur", message: "请输入您的账号"},
        ],
        password: [
          {required: true, trigger: "blur", message: "请输入您的密码"},
        ],
      },
      loading: false,
    };
  },
  methods: {
    handleLogin() {
      var that = this;
      this.loading = true;
      Login(that.loginForm).then((res) => {
        if (res.status) {
          window.sessionStorage.setItem("token", res.data);
          messageInfo({message: "登陆成功！"});
          // that.$router.replace("/");
        } else {
        }
        this.$router.replace("/welcome");
        that.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.main-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.login-container {
  z-index: 1;
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  box-shadow: 2px 3px 3px #888888;
  opacity: 0.9;
}

.login-form {
  z-index: 1;
  width: 85%;
}

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
  font-size: 26px;
}

.spaceMan-parent {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
}

.spaceMan {
  z-index: 1;
  position: fixed;
  width: 40%;
  height: 40%;
  left: 30%;
  top: 0;
  bottom: 30%;
  right: 30%;
  margin: auto auto;
  transform: translate(-50% -50%);
}

.bg {
  z-index: -20;
  width: 100%;
  height: 100%;
}

</style>